<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<p:dataTable id="formulasTable" var="formula"
		value="#{formulasMB.formulas}" emptyMessage="No hay formulas cargadas"
		filteredValue="#{formulasMB.formulasFiltered}" paginator="true"
		selectionMode="single" rowsPerPageTemplate="5,10,15"
		rowKey="#{formula.id}" selection="#{formulasMB.selectedFormula}"
		rows="5" paginatorPosition="bottom" styleClass="table table-bordered"
		rowStyleClass="#{formula.state == 1 ? null : 'error'}">
		<p:ajax event="rowSelect" listener="#{formulasMB.rowSelected}" />
		<p:column style="width:2%">
			<p:rowToggler />
		</p:column>
		<p:column id="formulaId" filterBy="#{formula.id}" style="width:5%;"
			sortBy="#{formula.id}" headerText="N">
			<h:outputText value="#{formula.id}" />
		</p:column>
		<p:column id="formulaDesc" filterBy="#{formula.description}"
			style="width:73%;" sortBy="#{formula.description}"
			headerText="Descripción" filterMatchMode="contains">
			<h:outputText value="#{formula.description}" />
		</p:column>
		<p:column id="formulaState" style="width:20%;"
			sortBy="#{formula.state}" headerText="Estado">
			<h:outputText value="#{formula.state == 1 ? 'Activo': 'Inactivo'}" />
		</p:column>
		<p:rowExpansion>
			<p:panelGrid styleClass="table table-bordered table-striped">
				<p:row>
					<p:column styleClass="tableNoGrid">
						<ui:repeat var="formulaMp" value="#{formula.formulaMps}">
							<p:spacer width="5px">
							</p:spacer>
							<h:outputText
								value="#{formulaMp.item.descripcion} ( #{formulaMp.percent} % )"
								styleClass="pull-left"></h:outputText>
						</ui:repeat>
					</p:column>
				</p:row>
			</p:panelGrid>
		</p:rowExpansion>
	</p:dataTable>
</ui:composition>